import { ApiPratice } from "@/utils/api";
import { Toast } from "antd-mobile";
import React, { useEffect, useReducer, useRef, useState } from "react";
import { useNavigate, useSearchParams } from "react-router-dom";
import style from "./index.module.scss";
type Props = {};

const reduce = (
  state: IState,
  action: { type: string; payload: number }
): IState => {
  if (action.type === "cat1") {
    state.cat1 = action.payload;
  } else if (action.type === "cat2") {
    state.cat2 = action.payload;
  } else if (action.type === "qanumber") {
    state.qanumber = action.payload;
  } else {
    return state;
  }
  return { ...state };
};
const stateInit = {
  cat1: 0,
  cat2: 0,
  qanumber: 0,
};

export default function index({}: Props) {
  const [cat1, setCat1] = useState<number>(0);//科目
  const [cat2, setCat2] = useState<number>(0);//类型
  const [qanumber, setQanumber] = useState<number>(0);//数量
  const navigate = useNavigate(); // 跳转
  const [searchParams, setSearchParams] = useSearchParams(); //获取路由路径上的参数
  const [praticeData, setPraticeData] = useState<Array<IDatum>>(); //练习页面的响应数据
  const [allList, setAllList] = useState<Array<IAllData>>([
    { text: "全部", type: "all" },
    { text: "未做", type: "notdone" },
    { text: "已做", type: "done" },
    { text: "错误", type: "err" },
  ]); //全部数据
  const [numList, setNumList] = useState<Array<number>>([
    5, 10, 20, 30, 50, 100,
  ]); //数量数据
  const data = useRef<any>({
    //全局变量
    all: "全部",
    qa: "问答",
    fill: "填空",
    code: "编程",
    one: "单选",
    check: "判断",
    many: "多选",
  }); //类型数据
  const [state, dispatch] = useReducer(reduce, stateInit); //高亮控制
  let actionCode = searchParams.get("actionCode"); //获取页面传递进来的actionCode
  //练习页面请求
  const getData = async (actionCode: string, testType: string) => {
    let res = await ApiPratice(actionCode, testType); //发起请求
    if (res.errCode !== 0) {
      Toast.show({
        icon: "fail",
        content: res.message,
      });
      return;
    }
    setPraticeData(res.data); //赋值响应数据
  };
  //进入练习模式
  const Topractice = () => {
    //全部
    let testType = allList.find((item, index) => {
      return index == cat1 ? item.text : null;
    });
    //数量
    let testNum = numList.find((item, index) => {
      return index == qanumber ? item : null;
    });
     //类型
    let questionType = praticeData?.find((item, index) => {
      return index == cat2 ? item : null;
    });
    navigate(
      "/test?actionCode=" +
        actionCode +
        "&testType=" +
        testType?.type +
        "&testNum=" +
        testNum +
        "&questionType=" +
        questionType?.key
    );
  };
  useEffect(() => {
    getData(actionCode as string, "all"); //练习页面请求
  }, [stateInit]);
  return (
    <div className={style.content}>
      <div className="qd-practice-box">
        <div className="qd-practice-right" onClick={Topractice}>
          进入练习模式
        </div>
        <div
          className="qd-practice-left"
          onClick={() => {
            Toast.show("该功能暂未开放");
          }}
        >
          进入考试模式
        </div>
      </div>

      {/* 当前学科 */}
      <div className="qd-practice-all">
        <div className="qd-practice-title">
          <div className="qd-practice-right">当前学科</div>
          <div className="qd-practice-left">清除记录</div>
        </div>
        <div className="qd-practice-allbtn">
          {allList.map((item, index) => {
            return (
              <div
                onClick={() => {
                  setCat1(index)
                  dispatch({ type: "cat1", payload: index })
              }}
                key={index}
                className={[
                  "qd-practice-btn-one",
                  state.cat1 === index ? "qd-practice-btn-active" : null,
                ].join(" ")}
              >
                {item.text}
              </div>
            );
          })}
        </div>
      </div>
      {/* 题目类型 */}
      <div className="qd-practice-type">
        <div className="qd-practice-title">题目类型</div>
        <div className="qd-practice-btn">
          {praticeData?.map((item, index) => {
            return (
              <div
                onClick={() => {
                  setCat2(index)
                  dispatch({ type: "cat2", payload: index })
                } }//subject
                className={[
                  "qd-practice-btn-s",
                  state.cat2 === index ? "qd-practice-btn-actives" : null,
                ].join(" ")}
                key={item.key}
              >
                {data.current[item.key]}
                {item.value}
              </div>
            );
          })}
        </div>
      </div>
      {/* 做题数量 */}
      <div className="qd-quantity-box">
        <div className="qd-quantity-title">做题数量</div>
        <div className="qd-quantity-btn">
          {numList.map((item, index) => {
            return (
              <div
                className={[
                  "qd-quantity-btn-e",
                  state.qanumber === index ? "qd-quantity-btn-e-active" : null,
                ].join(" ")}
                key={index}
                onClick={() => {
                  setQanumber(index)
                  dispatch({ type: "qanumber", payload: index })
                }
                }
              >
                {item}
              </div>
            );
          })}
        </div>
      </div>
      {/* 返回上一页 */}
      <div
        className="qd-back"
        onClick={() => {
          navigate("/"),
            Toast.show({
              icon: "loading",
              content: "数据加载中",
              duration: 300,
            });
        }}
      >
        返回上一页
      </div>
    </div>
  );
}
//页面数据类型
interface IDatum {
  key: string;
  value: number;
  sort: number;
}
interface IState {
  cat1: number;
  cat2: number;
  qanumber: number;
}
interface IAllData {
  text: string;
  type: string;
}
